<template>
  <div class="login">
    <div class="login-head">忘记密码</div>
    <div class="login-main">
      <div class="login-list">
        <div class="login-title">手机号</div>
        <input class="login-input" type="number" v-model="tel" placeholder="请输入手机号码" />
      </div>
      <div class="login-list">
        <div class="login-title">新密码</div>
        <input class="login-input" type="password" v-model="psw" placeholder="请输入新登录密码" />
      </div>
      <div class="login-list">
        <div class="login-title">验证码</div>
        <input class="login-input" style="width: 30vw" type="number" v-model="code" placeholder="请输入验证码" />
        <div class="login-code" @click="sendSms">{{ codeTitle == '获取' ? codeTitle : codeTitle + 's' }}</div>
      </div>
      <div class="login-btn" @click="doForget">重置密码</div>
      <div class="login-foot">
        <div class="login-toRegiste" @click="toRegiste">注册账号</div>
        <div class="login-forget" @click="toLogin">我想起来了</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
// @ is an alias to /src
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';

@Component({
  components: {},
})
export default class Login extends Sence {
  public tel: any = ''; // 手机号
  public psw: any = ''; // 密码
  public codeTitle: any = '获取'; // 获取验证码文字内容
  public code: any = '';

  /**
   * 初始化
   */
  public mounted(): void {
    if (localStorage.getItem('token')) {
      this.$router.push('/');
    }
  }

  /**
   * 表单失去焦点回滚底部
   */
  public inputScroll(): void {
    window.scrollTo(0, document.documentElement.clientHeight);
  }

  /**
   * 前往注册
   */
  public toRegiste(): void {
    this.$router.push('/registe');
  }
  public toLogin(): void {
    this.$router.push('/login');
  }
  /**
   * 获取手机验证码
   */
  public sendSms(): void {
    if (this.codeTitle == '获取') {
      this.post('api/identify/send', {
        phone: this.tel,
      }).then((res: any) => {
        this.codeTitle = 59;
        let time = setInterval(() => {
          this.codeTitle -= 1;
          if (this.codeTitle == 0) {
            clearInterval(time);
            this.codeTitle = '获取';
          }
        }, 1000);
      });
    }
  }

  /**
   * 忘记密码
   */
  public doForget(): void {
    this.inputScroll();
    let CryptoJS: any = require('crypto-js');
    let password: any = CryptoJS.AES.encrypt(CryptoJS.MD5(this.psw).toString(), CryptoJS.enc.Utf8.parse('sgg45747ss223411'), { mode: CryptoJS.mode.ECB }).toString();
    this.post('api/user/forget', {
      phone: this.tel,
      password,
      identifyCode: this.code,
    }).then((res: any) => {
      (<any>this)
        .$createDialog({
          type: 'alert',
          title: '完成',
          content: '密码重置成功，请使用新密码登录',
          icon: 'cubeic-alert',
          onConfirm: () => {
            this.toLogin();
          },
        })
        .show();
    });
  }
}
</script>

<style scoped lang="stylus">
    input {
        outline: none;
        border: 0;
        padding 5px 0;
    }

    .login
        height 100vh
        width 100vw
        background-image url("../image/login.png")
        background-size 100%

        .login-head
            height 35px
            line-height 35px
            color white
            font-size 16px
            font-weight bold
            text-align center

        .login-main
            width 80vw
            margin auto
            margin-top 20vh
            background white
            border-radius 8px
            box-sizing border-box
            padding 0 10px

            .login-foot
                display flex
                flex-direction row
                justify-content space-between

            .login-list
                display flex
                align-items center
                border-bottom 1px solid #eee
                padding 8px 0

                .login-title
                    font-size 14px
                    font-weight bold
                    width 23vw

                .login-input
                    width calc(57vw - 20px)
                    font-size 14px

            .login-btn
                margin-top 10px
                width 100%
                height 35px
                line-height 35px
                text-align center
                background #007aff
                color white
                border-radius: 3px

            .login-toRegiste
                color #007aff
                height 35px
                line-height 35px
                font-size 12px
                font-weight bold

            .login-forget
                color #dd524d
                height 35px
                line-height 35px
                font-size 12px
                font-weight bold
.login-code
    margin-left 1vw
    width calc(25vw - 20px)
    background #007aff
    text-align center
    color white
    height 28px
    line-height 28px
    border-radius 3px
    font-size 13px
</style>
